<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>服务增加或修改页面</title>
    <link rel="stylesheet" href="../../../../res/layui/css/layui.css" media="all">
    <script src="../../../../res/js/jquery-3.1.1.min.js" type="text/javascript"
            charset="utf-8"></script>
    <script type="text/javascript" src="../../../../res/js/login_common.js"></script>
    <script src="../../../../res/layui/layui.js" charset="utf-8"></script>
    <script src="../../../../res/js/Tools.js"></script>
    <style>
        #btn:hover{
            background: #33aba0;
            cursor: pointer;
        }
        #btn{
            background: #009688;
            color: white;
            width: 100px;
            height: 36px;
            border: 0;
        }
        #btn1:hover{
            background: #33aba0;
            cursor: pointer;
        }
        #btn1{
            background: #009688;
            color: white;
            width: 100px;
            height: 36px;
            border: 0;
        }
        #btn2:hover{
            background: #33aba0;
            cursor: pointer;
        }
        #btn2{
            background: #009688;
            color: white;
            width: 100px;
            height: 36px;
            border: 0;
        }
        #btnFour:hover{
            background: #33aba0;
            cursor: pointer;
        }
        #btnFour{
            background: #009688;
            color: white;
            width: 100px;
            height: 36px;
            border: 0;
        }
    </style>
    <script>
        $.ajaxSetup({
            async: false
        });
        $(function(){
            //图片1
            $("#btn").click(function () {
                $("#fileOne").click();
                $("#fileOne").change(function(obj){
                    fileSize = $('#fileOne').get(0).files[0].size/1024/1024;
                    if(fileSize>=5){
                        layer.msg("图片大小不能大于5MB");
                        return false;
                    }
                    var fileInput = $('#fileOne').get(0).files[0];//获取input控件的file
                    if(fileInput){
                        var str=fileInput.name;
                        _fileName = str.substring(str.lastIndexOf(".") + 1).toLowerCase();
                        if(_fileName!="jpg" && _fileName!="png" && _fileName!="gif"){
                            layer.msg("不支持上传该类文件");
                            return false;
                        }else{
                            //取后缀名
                            $("#ts").html(str.substring(0,4)+"..."+str.match(/\.([^\.]+)$/)[1]);
                        }
                    }
                });
            });
            //图片2
            $("#btn1").click(function () {
                $("#fileTwo").click();
                $("#fileTwo").change(function(obj){
                    fileSize = $('#fileTwo').get(0).files[0].size/1024/1024;
                    if(fileSize>=5){
                        layer.msg("图片大小不能大于5MB");
                        return false;
                    }
                    var fileInput = $('#fileTwo').get(0).files[0];//获取input控件的file
                    if(fileInput){
                        var str=fileInput.name;
                        _fileName = str.substring(str.lastIndexOf(".") + 1).toLowerCase();
                        if(_fileName!="jpg" && _fileName!="png" && _fileName!="gif"){
                            layer.msg("不支持上传该类文件");
                            return false;
                        }else{
                            //取后缀名
                            $("#ts1").html(str.substring(0,4)+"..."+str.match(/\.([^\.]+)$/)[1]);
                        }
                    }
                });
            });
            //图片3
            $("#btn2").click(function () {
                $("#fileThree").click();
                $("#fileThree").change(function(obj){
                    fileSize = $('#fileThree').get(0).files[0].size/1024/1024;
                    if(fileSize>=5){
                        layer.msg("图片大小不能大于5MB");
                        return false;
                    }
                    var fileInput = $('#fileThree').get(0).files[0];//获取input控件的file
                    if(fileInput){
                        var str=fileInput.name;
                        _fileName = str.substring(str.lastIndexOf(".") + 1).toLowerCase();
                        if(_fileName!="jpg" && _fileName!="png" && _fileName!="gif"){
                            layer.msg("不支持上传该类文件");
                            return false;
                        }else{
                            //取后缀名
                            $("#ts2").html(str.substring(0,4)+"..."+str.match(/\.([^\.]+)$/)[1]);
                        }
                    }
                });
            });
            //图片4
            $("#btnFour").click(function () {
                $("#fileFour").click();
                $("#fileFour").change(function(obj){
                    fileSize = $('#fileFour').get(0).files[0].size/1024/1024;
                    if(fileSize>=5){
                        layer.msg("图片大小不能大于5MB");
                        return false;
                    }
                    var fileInput = $('#fileFour').get(0).files[0];//获取input控件的file
                    if(fileInput){
                        var str=fileInput.name;
                        _fileName = str.substring(str.lastIndexOf(".") + 1).toLowerCase();
                        if(_fileName!="jpg" && _fileName!="png" && _fileName!="gif"){
                            layer.msg("不支持上传该类文件");
                            return false;
                        }else{
                            //取后缀名
                            $("#tsFour").html(str.substring(0,4)+"..."+str.match(/\.([^\.]+)$/)[1]);
                        }
                    }

                });
            });
        })
    </script>
</head>
<body>
<!--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>添加新闻</legend>
</fieldset>-->

<form class="layui-form" lay-filter="example" action="" id="formDId"  method="post" enctype="multipart/form-data">
    <input type="hidden" name="exp1" id="exp1">
    <input type="hidden" name="exp3" id="exp3">
    <input type="hidden" name="exp6" id="exp6">
    <input type="hidden" name="exp7" id="exp7">
    <input type="hidden" id="scbId" name="scbId">
    <div class="layui-form-item">
        <label class="layui-form-label">服务名称:</label>
        <div class="layui-inline">
            <input type="text" name="scbName" style="width: 400px" id="scbName"  lay-verify="required" placeholder="请输入服务方名称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">服务方地址</label>
            <div class="layui-input-inline">
                <input type="text" name="scbAddress" style="width: 260px" id="scbAddress" lay-verify="required" placeholder="请输入服务方地址" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">联系电话</label>
            <div class="layui-input-inline">
                <input type="text" name="scbPhone" style="width: 260px" id="scbPhone" lay-verify="required|phone" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">服务费用</label>
            <div class="layui-input-inline">
                <input type="text" name="scbMoney" style="width: 260px" id="scbMoney" lay-verify="required|number" placeholder="请输入服务费用" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">请选择服务类型</label>
        <div class="layui-input-block">
            <select id="syId" name="syId"  lay-filter="demo" lay-verify="required">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">请选择购买类型</label>
        <div class="layui-input-block">
            <select id="number" name="number"  lay-filter="demo" lay-verify="required">
                <option value="1">直接购买</option>
                <option value="2">合同购买</option>
                <option value="3">拍照购买</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">服务详情</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入服务详情" required lay-verify="required"  class="layui-textarea" name="scbDetails" id="scbDetails"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">合同内容</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入合同内容" required lay-verify="required" class="layui-textarea" name="exp4" id="exp4"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="color: red">*附件1</label>
        <div class="layui-input-inline">
            <input type="file" name="fileOne" style="display: none" id="fileOne"  autocomplete="off"
                   class="layui-input">
            <button id="btn"  type="button" >上传文件</button>
            <a id="ts" target="_blank" style="text-decoration:none"></a>
        </div>
    </div>
    <div class="layui-form-item">
        <!--************这里是上传图片的代码***************-->
        <div class="layui-inline">
            <label class="layui-form-label" style="color: red">*附件2</label>
            <div class="layui-input-inline">
                <input type="file" name="fileTwo" style="display: none" id="fileTwo"  autocomplete="off"
                       class="layui-input">
                <button id="btn1"  type="button" >上传文件</button>
                <a id="ts1" target="_blank" style="text-decoration:none"></a>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <!--************这里是上传图片的代码***************-->
        <div class="layui-inline">
            <label class="layui-form-label" style="color: red">*附件3</label>
            <div class="layui-input-inline">
                <input type="file" name="fileThree" style="display: none" id="fileThree"  autocomplete="off"
                       class="layui-input">
                <button id="btn2"  type="button" >上传文件</button>
                <a id="ts2" target="_blank" style="text-decoration:none"></a>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <!--************这里是上传图片的代码***************-->
        <div class="layui-inline">
            <label class="layui-form-label" style="color: red">*附件4</label>
            <div class="layui-input-inline">
                <input type="file" name="fileFour" style="display: none" id="fileFour"  autocomplete="off"
                       class="layui-input">
                <button id="btnFour"  type="button" >上传文件</button>
                <a id="tsFour" target="_blank" style="text-decoration:none"></a>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn site-demo-active" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-bg-red">重置按钮</button>
        </div>
    </div>
</form>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    var form=null;
    layui.use('form', function() {
        form = layui.form;
        //监听提交
        form.on('submit(demo1)', function (data) {
            var ide = getQueryString("id");
            var fileInputFour = $('#fileFour').get(0).files[0];//获取input控件的file
            var fileInput = $('#fileOne').get(0).files[0];//获取input控件的file
            var fileInputTwo = $('#fileTwo').get(0).files[0];//获取input控件的file
            var fileInputThree = $('#fileThree').get(0).files[0];//获取input控件的file
            if(ide== null || ide == undefined || ide == ''){
                if(fileInput== null || fileInput == undefined || fileInput == ''){
                    layer.msg("必填文件1不能为空");
                    $("#ts").html('文件1不能为空');
                    return false;
                }else if(fileInputTwo== null || fileInputTwo == undefined || fileInputTwo == ''){
                    layer.msg("必填文件2不能为空");
                    $("#ts1").html('文件2不能为空');
                    return false;
                }else if(fileInputThree== null || fileInputThree == undefined || fileInputThree == ''){
                    layer.msg("必填文件3不能为空");
                    $("#ts2").html('文件3不能为空');
                    return false;
                }else if(fileInputFour== null || fileInputFour == undefined || fileInputFour == ''){
                    layer.msg("必填文件4不能为空");
                    $("#ts2").html('文件4不能为空');
                    return false;
                }
            }
            // 单击之后提交按钮不可选,防止重复提交
            var DISABLED = 'layui-btn-disabled';
            // 增加样式
            $('.site-demo-active').addClass(DISABLED);
            // 增加属性
            $('.site-demo-active').attr('disabled', 'disabled');
            var formData = new FormData(document.getElementById("formDId"));
            var loadIndex =layer.load();
            var url = "../../../../dkm.dkmproject/serviceTb/addorUpdate";
            $.ajax({
                url: url,
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (obj) {
                    if (obj.num >0) {
                        layer.msg(obj.msg, {
                            icon: 1,
                            time: 1000 //1秒关闭(如果不配置默认三秒)
                        }, function () {
                            layer.close(loadIndex);
                            //关闭当前层
                            //当你在iframe页面关闭自身时
                            parent.layui.table.reload("test");
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                            //刷新父页面

                            //parent.location.reload();
                        });
                        return false;
                    }else{
                        layer.msg(obj.msg);
                        layer.close(loadIndex);
                        return false;
                    }
                },
                error: function (e) {
                    layer.msg("错误！！");
                }
            });
            return false;
        });
    })
    loadType();
    //修改操作
    var ide = getQueryString("id");

    if(ide) {
        findById();//修改页面的赋值
        var str=$("#exp1").val();
        var strone=$("#exp3").val();
        var strtwo=$("#exp6").val();
        var strthree=$("#exp7").val();
        if(str.length>1){
            $("#ts").text(str.substring(0,13)+"。。。。。 ."+str.match(/\.([^\.]+)$/)[1]);
            $("#ts").prop("href",getRootPathTwo()+str);
        }
        if(strone.length>1){
            $("#ts1").html(strone.substring(0,13)+"。。。。。 ."+strone.match(/\.([^\.]+)$/)[1]);
            $("#ts1").prop("href",getRootPathTwo()+strone);
        }
        if(strtwo.length>1){
            $("#ts2").html(strtwo.substring(0,13)+"。。。。。 ."+strtwo.match(/\.([^\.]+)$/)[1]);
            $("#ts2").prop("href",getRootPathTwo()+strtwo);
        }
        if(strthree.length>1){
            $("#tsFour").html(strtwo.substring(0,13)+"。。。。。 ."+strtwo.match(/\.([^\.]+)$/)[1]);
            $("#tsFour").prop("href",getRootPathTwo()+strthree);
        }
    }
    //加载下拉框
    function loadType(){

        var url="../../../../dkm.dkmproject/servicetypeTb/selectAll";
        var data=null;
        $.get(url,data,function(obj){
            $.each(obj,function(index,item){
                $("#syId").append("<option value='"+item.syId+"'>"+item.syName+"</option>");
                //$("#menuTypeID").append("<option value='"+item.menuTypeID+"'>"+item.menuTypeName+"</option>");
            });
            form.render('select');
        },"json");

    }
    //修改页面的赋值
    function findById(){
        var id=getQueryString("id");
        var url="../../../../dkm.dkmproject/serviceTb/findById";
        var data={scbId:id};
        $.post(url,data,function(obj){
            $("#scbId").val(obj.scbId);
            $("#scbName").val(obj.scbName);
            $("#exp1").val(obj.exp1);
            $("#exp3").val(obj.exp3);
            $("#exp4").val(obj.exp4);
            $("#exp6").val(obj.exp6);
            $("#exp7").val(obj.exp7);
            $("#scbAddress").val(obj.scbAddress);
            $("#scbPhone").val(obj.scbPhone);
            $("#scbMoney").val(obj.scbMoney);
            $("#syId").val(obj.syId);
            $("#number").val(obj.exp5);
            $("#scbDetails").val(obj.scbDetails);
            form.render('select');
            form.render('select');
        },"json");

    }
</script>


</body>
</html>